<template>
  <div class="com-container">
    <div class="com-chart" ref="safety_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstance: null,
      allData: null
    }
  },
  mounted() {
    this.initChart()
    this.getData()
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.safety_ref)
      const initOption = {
        title: {
          text: '安全生产状态',
          left: 'center',
          textStyle: {
            color: '#B4B4B4',
            fontWeight: 'lighter'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.1)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#fadd69'
            }
          },
          formatter: function(params) {
            let value = params[0].value
            return `${params[0].axisValue}：${value}`
          }
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#B4B4B4'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'category',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#B4B4B4'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              rotate: 90,
              formatter: '{value} '
            }
          }
        ],
        series: [
          {
            type: 'line',
            itemStyle: {
              normal: {
                color: '#fadd69'
              }
            }
          }
        ]
      }
      this.chartInstance.setOption(initOption)
    },
    //获取服务器的数据
    async getData() {
      const ret = await this.$http.get('/static/json/safetyManagement.json')
      // console.log(ret.data.data)
      this.allData = ret.data.data
      this.updateChart()
    },
    //更新图表
    updateChart() {
      const month = []
      const DrillsNumber = []
      const NormalOrNot = []
      this.allData.forEach(item => {
        const {
          name,
          value: { drillsNumber, normalOrNot }
        } = item
        month.push(name)
        DrillsNumber.push(drillsNumber)
        NormalOrNot.push(normalOrNot)
      })
      // console.log(month, DrillsNumber, NormalOrNot)
      const dataOption = {
        xAxis: {
          data: month
        },
        series: [
          {
            data: NormalOrNot
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    }
  }
}
</script>

<style>
/* body {
  background-color: #fadd69;
} */
</style>
